<template>
  <div><el-card class="box-card">
    <el-button type="primary" style="background-color:#e15536" @click="add">新增模板</el-button>
    <el-table
      :data="tableData"
      stripe
      border
      style="width: 100%;margin-top:30px"
      :header-cell-style="{ background: '#f8faff' }"
    >
      <el-table-column
        prop="templateType"
        label="模板类型"
        width="180"
      >
        <template v-slot="{row}">
          <span v-if="row.templateType===1">同城寄</span>
          <span v-else-if="row.templateType===2">省内寄</span>
          <span v-else-if="row.templateType===3">经济区互寄</span>
          <span v-else-if="row.templateType===4">跨省</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="transportType"
        label="运送类型"
        width="180"
      >
        <template v-slot="{row}">
          <span v-if="row.transportType===1">普快</span>
          <span v-else-if="row.transportType===2">特快</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="associatedCityList"
        label="关联城市"
      >
        <template v-slot="{row}">
          <span v-if="row.associatedCityList[0]==='1' ||row.associatedCityList[0]==='全国'">全国</span>
          <span v-else-if="row.associatedCityList[0]==='2' ||row.associatedCityList[0]==='京津冀'">京津冀</span>
          <span v-else-if="row.associatedCityList[0]==='3' ||row.associatedCityList[0]==='江浙沪'">江浙沪</span>
          <span v-else-if="row.associatedCityList[0]==='4' ||row.associatedCityList[0]==='川渝'">川渝</span>
          <span v-else-if="row.associatedCityList[0]==='5'||row.associatedCityList[0]==='黑吉辽'">黑吉辽</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="firstWeight"
        label="首重"
      />
      <el-table-column
        prop="continuousWeight"
        label="续重"
      />
      <el-table-column
        prop="lightThrowingCoefficient"
        label="轻抛系数"
      />
      <el-table-column
        label="操作"
      >
        <template v-slot="{row}">
          <el-button type="text" size="small" @click="edit(row)">编辑</el-button>
          <el-button type="text" size="small" style="color:#f78989" @click="del(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form ref="newData" :model="newData" style="margin-left:100px" :rules="rules">
        <el-form-item label="模板类型" prop="templateType">
          <el-select v-model="newData.templateType" placeholder="请选择模板类型" style="width:500px">
            <el-option label="同城寄" value="1" />
            <el-option label="省内寄" value="2" />
            <el-option label="经济区互寄" value="3" />
            <el-option label="跨省" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="运送类型" prop="transportType">
          <el-select v-model="newData.transportType" placeholder="请选择运送类型" style="width:500px">
            <el-option label="普快" value="1" />
            <el-option label="特快" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="关联城市" prop="associatedCityList">
          <el-select v-model="newData.associatedCityList[0]" placeholder="请选择关联城市" style="width:500px">
            <el-option label="全国" value="1" />
            <el-option label="京津冀" value="2" />
            <el-option label="江浙沪" value="3" />
            <el-option label="川渝" value="4" />
            <el-option label="黑吉辽" value="5" />
          </el-select>
        </el-form-item>
        <el-form-item label="首重价格" prop="firstWeight">
          <el-input v-model="newData.firstWeight" placeholder="请输入首重价格" style="width:500px">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="续重价格" prop="continuousWeight">
          <el-input v-model="newData.continuousWeight" placeholder="请输入续重价格" style="width:500px">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="轻抛系数" prop="lightThrowingCoefficient">
          <el-input v-model="newData.lightThrowingCoefficient" placeholder="请输入轻抛系数" style="width:500px" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" style="background-color:#e15536" @click="submit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </el-card></div>
</template>
<script>
import { getCarriagesList, addCarriagesList, delCarriagesList } from '@/api/manager'
export default {
  data() {
    return {
      newData: {
        associatedCityList: [], // 关联城市
        computeWeight: '', // 计费重量
        continuousWeight: '', // 续重价格
        created: '', // 创建时间
        expense: '', // 运费
        firstWeight: '', // 首重价格
        lightThrowingCoefficient: '', // 轻抛系数
        templateType: '', // 模板类型
        transportType: '', // 运送类型
        updated: ''// 更新时间
      },
      rules: {
        associatedCityList: [
          { required: true, message: '请选择关联城市', trigger: 'change' }
        ],
        templateType: [
          { required: true, message: '请选择模板类型', trigger: 'change' }
        ],
        transportType: [
          { required: true, message: '请选择运送类型', trigger: 'change' }
        ],
        firstWeight: [
          { required: true, message: '首重价格不能为空', trigger: 'blur' }
        ],
        continuousWeight: [
          { required: true, message: '续重价格不能为空', trigger: 'blur' }
        ],
        lightThrowingCoefficient: [
          { required: true, message: '首重价格不能为空', trigger: 'blur' }
        ]

      },
      tableData: [],
      dialogFormVisible: false,
      title: '新增模板'
    }
  },
  created() {
    this.getCarriagesList()
  },
  methods: {
    async getCarriagesList() {
      const result = await getCarriagesList()
      this.tableData = result
    },
    // 取消
    cancel() {
      this.$refs.newData.resetFields()
      this.dialogFormVisible = false
    },

    // 新增或编辑
    async submit() {
      await this.$refs.newData.validate()
      if (this.title === '新增模板') {
        await addCarriagesList(this.newData)
        this.$message.success('新增模板成功')
      } else {
        this.newData.templateType = Number(this.newData.templateType)
        this.newData.transportType = Number(this.newData.transportType)
        this.newData.firstWeight = Number(this.newData.firstWeight)
        await addCarriagesList(this.newData)
        this.$message.success('编辑模板成功')
      }
      this.$refs.newData.resetFields()
      this.dialogFormVisible = false
      this.getCarriagesList()
    },
    async edit(row) {
      this.dialogFormVisible = true
      this.title = '编辑模板'
      this.newData.templateType = row.templateType.toString()
      this.newData.transportType = row.transportType.toString()
      this.newData.associatedCityList[0] = row.associatedCityList[0]
      this.newData.firstWeight = row.firstWeight
      this.newData.continuousWeight = row.continuousWeight
      this.newData.lightThrowingCoefficient = row.lightThrowingCoefficient
      this.newData.id = row.id
    },
    add() {
      this.dialogFormVisible = true
      this.title = '新增模板'
    },
    async del(id) {
      this.$confirm('请问确定要删除该模板嘛').then(async() => {
        await delCarriagesList(id)
        this.$message.success('模板删除成功')
        this.getCarriagesList()
      })
    }
  }
}
</script>
<style scoped>
.box-card{
  width: 97%;
  height: 580px;
  margin: 0 20px 20px;
  padding: 28px;
}
.dialog-footer{
  text-align: center;
}
</style>
